<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Img-Helper</title>
  <link rel="stylesheet" href="./css/styles.css">
  <script src="./js/main.js"></script>
</head>
<body>
  <div class="page-container">
    <div class="container">
      <div id="dropzone" class="dropzone">
        <canvas id="canvas" class="canvas_box"></canvas>
      </div>
    </div>
    <div id="file_upload_box" class="upload-box hide">
      <label class="file-upload" for="upload_file">
        点击选择上传图片...
        <input type="file" class="hide" accept="image/*" id="upload_file" />
      </label>
    </div>
    <div class="status-bar">
      <div class="range-bar">
        <span>缩放比例(20%~200%)</span>
        <input type="range" id="range" min="20" max="200" value="100" class="range">
        <span class="view-rate" id="range_val" />100%</span>
      </div>
      <select id="select_size" value="" class="def_size">
        <option value="0">请选择截图尺寸...</option>
        <option value="250x122">250x122</option>
        <option value="122x250">122x250</option>
        <option value="296x128">296x128</option>
        <option value="128x296">128x296</option>
        <option value="400x300">400x300</option>
        <option value="640x384">640x384</option>
      </select>
      <input class="export-btn" type="button" value="导出" id="export" />
    </div>
    <div class="hide">

    </div>
  </div>
</body>
</html>